<template>
  <view class="wantBuyDetail-com">
    <view class="wantBuyDetail-warp">
      <view class="wantBuyDetail-com__title">{{ $t('locales.purchaseGoods') }}</view>
      <view class="wantBuyDetail-com__main">
        <GoodsItem
          className="wantBuyDetail-com__goods"
          :dataValue="valueData"
        />

        <view class="main-cell">
          <view class="main-cell__name">{{ $t('locales.purchaseNumber') }}</view>
          <view class="main-cell__value">
            <text style="color: #ff0f10; font-size: 32rx">{{
              valueData.purchaseQty
            }}</text>
            <text style="color: #999999; font-size: 24rx">{{
              valueData.unit
            }}</text>
          </view>
        </view>

        <view class="main-cell">
          <view class="main-cell__name">{{ $t('locales.purchaseNo') }}</view>
          <view class="main-cell__value">{{ valueData.purchaseNo }}</view>
        </view>

        <view class="main-cell">
          <view class="main-cell__name">{{ $t('locales.timeRemaining') }}</view>
          <view class="main-cell__value">
            <template v-if="valueData.isLongterm === 1"> {{ $t('locales.isLongterm') }} </template>
            <template v-else>{{ valueData.timeRemaining }}</template>
          </view>
        </view>

        <view class="main-cell" v-if="valueData.purchaseStatus === -1">
          <view class="main-cell__name">{{ $t('locales.closeTime') }}</view>
          <view class="main-cell__value">{{ valueData.closeTime }}</view>
        </view>
      </view>
    </view>

    <view class="wantBuyDetail-warp">
      <view class="wantBuyDetail-com__title">{{ $t('locales.enterpriseInfo') }}</view>
      <view class="wantBuyDetail-com__main">
        <view class="main-cell">
          <view class="main-cell__name">{{ $t('locales.enterpriseInfo') }}</view>
          <view class="main-cell__value">{{ valueData.enterpriseName }}</view>
        </view>

        <view class="main-cell">
          <view class="main-cell__name">{{ $t('locales.contacts') }}</view>
          <view class="main-cell__value">{{
            valueData.enterpriseContacts
          }}</view>
        </view>

        <view class="main-cell">
          <view class="main-cell__name">{{ $t('locales.contactInfo') }}</view>
          <view class="main-cell__value">{{
            valueData.enterprisePhone
          }}</view>
        </view>

        <view class="main-cell">
          <view class="main-cell__name">{{ $t('locales.contactAddress') }}</view>
          <view class="main-cell__value">
            {{ valueData.country || '' }}
            {{ valueData.prov || '' }}
            {{ valueData.city || '' }}
            {{ valueData.enterpriseAddress || '' }}
          </view>
        </view>
      </view>
    </view>

    <view class="wantBuyDetail-footer">
      <!-- 求购中 -->
      <template v-if="valueData.purchaseStatus === 1">
        <view
          class="wantBuyDetail-footer__btn"
          style="background-color: #7b9fd1"
          @click="onClose"
          >{{ $t('locales.closePurchase') }}</view
        >
        <view
          v-if="valueData.isFlag === 0"
          class="wantBuyDetail-footer__btn"
          @click="navSwitch('/pages/wantBuy/form?id=' + valueData.id)"
          >{{ $t('locales.edit') }}</view
        >
      </template>
      <!-- 已关闭 -->
      <template v-if="valueData.purchaseStatus === -1">
        <view
          class="wantBuyDetail-footer__btn"
          style="background-color: #cccccc"
          >{{ $t('locales.isClose') }}</view
        >
        <view
          class="wantBuyDetail-footer__btn"
          @click="
            navSwitch('/pages/wantBuy/form?again=true&id=' + valueData.id)
          "
          >{{ $t('locales.publishAgain') }}</view
        >
      </template>
      <!-- 已截止 -->
      <template v-if="valueData.purchaseStatus === 0">
        <view
          class="wantBuyDetail-footer__btn"
          style="background-color: #cccccc"
          >{{ $t('locales.isClosed') }}</view
        >
        <view
          class="wantBuyDetail-footer__btn"
          @click="
            navSwitch('/pages/wantBuy/form?again=true&id=' + valueData.id)
          "
          >{{ $t('locales.publishAgain') }}</view
        >
      </template>
    </view>
  </view>
</template>
<script>
import GoodsItem from '@/components/wantBuyGoodsList/templateItem'

import { purchaseClose } from '@/api/http/wantBuy'

export default {
  components: {
    GoodsItem
  },
  props: {
    valueData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {}
  },

  methods: {
    navSwitch(url) {
      uni.navigateTo({
        url
      })
    },

    onClose() {
      uni.showModal({
        title: '',
        content: this.$t('locales.closePurchaseMsg'),
        confirmText: this.$t('locales.close'),
        cancelText: this.$t('locales.cancel'),
        success: (res) => {
          if (res.confirm) {
            this.closeApi()
          }
        }
      })
    },

    async closeApi() {
      const res = await purchaseClose({
        id: this.valueData.id
      })
      uni.showToast({
        icon: 'none',
        title: res.message
      })
      if (res.code === 200) {
        this.$emit('close')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.wantBuyDetail-com {
  .wantBuyDetail-warp {
    margin: 16rpx 24rpx;
    background-color: #fff;
    border-radius: 16rpx;
    .wantBuyDetail-com__title {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #212121;
      padding: 24rpx;
      border-bottom: 1px solid #e3e6ed;
    }

    .wantBuyDetail-com__main {
      padding: 24rpx;
      /deep/ .wantBuyDetail-com__goods {
        .goods-item {
          margin: 0 !important;
        }
        .goods-item__top {
          padding: 0;
        }
      }

      .main-cell {
        display: flex;
        justify-content: space-between;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #555555;
        padding: 16rpx 0;

        .main-cell__value {
          margin-left: 30rpx;
          flex: 1;
          text-align: right;
          color: #212121;
        }
      }
    }
  }

  .wantBuyDetail-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    width: 100%;

    .wantBuyDetail-footer__btn {
      flex: 1;
      line-height: 88rpx;
      background: #0049ac;
      text-align: center;
      color: #fff;
    }
  }
}
</style>